百度路书实现轨迹回放（标准） |
您所在的位置：网站首页 › 百度地图 查看轨迹 › 百度路书实现轨迹回放（标准） |
百度路书实现轨迹回放（标准）
|
心酸制作历程
当刚接下这项目时，便开始研究如何实现轨迹回放的功能；而刚开始当然是直接查找百度的实例百度路书实例，如下图
直到一位大佬把这问题迎刃而解（我打辅助，多多学习） 查找路书的源码在找到一篇大佬的文档后，发现，需要从路书的源码下手，路书源码，推荐直接已CDN形式放在index.html中。 推荐看下路书源码， 你会了解很多东西，这样上手容易些。 下面直接进入我们的代码，废话不多说。 // 在mounted处 实例化地图 mounted() { var map = new BMap.Map("mymap"); //实例化地图 var point = new BMap.Point(116.404, 39.915); // 创建点坐标 map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别 map.enableScrollWheelZoom(true); // 允许缩放 map.centerAndZoom() this.istranslate = true this.infoWindow.contents = ` GSM信号： 速度：${Number(this.speednum)} KM/H 定位方式：卫星定位 ` }, methods: { // 获取轨迹点 allTrackData(val, index) { const params = { mcph: this.mcph, datetime: val.time, datetime1: val.startime, } this.path = [] // 轨迹点 this.temp = 0 // 进度条 getSlotDetail(params).then(res => { // 请求车辆轨迹点 res.data.forEach(item => { this.path.push({ lng: item.longitude, lat: item.latitude, heading: item.heading, speed: Number(item.speed) }) }) this.initMap() // 初始化地图 this.isPlay = true // 播放键开始 this.lushu.start() // 路书开始 this.maxNum = this.path.length - 2 // 打开天窗 this.infoWindow.show = true }) }, // 下面的两个方法 从路书源码中摘取 修改 // 初始化地图 initMap() { var _this = this var map = new BMap.Map("mymap"); var point = new BMap.Point(116.404, 39.915); // 创建点坐标 map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别 map.enableScrollWheelZoom(true); map.centerAndZoom() var arrPois = []; for (let i = 0; i me._path.length) { return; } //运行下一个点 me._moveNext(++me.i); } else { currentCount++; var x = effect(init_pos.x, target_pos.x, currentCount, count), y = effect(init_pos.y, target_pos.y, currentCount, count), pos = me._projection.pointToLngLat(new BMap.Pixel(x, y)); //设置marker if (currentCount == 1) { var proPos = null; if (me.i - 1 >= 0) { proPos = me._path[me.i - 1]; } if (me._opts.enableRotation == true) { me.setRotation(proPos, initPos, targetPos); } if (me._opts.autoView) { if (!me._map.getBounds().containsPoint(pos)) { me._map.setCenter(pos); } } } //正在移动 me._marker.setPosition(pos); //设置自定义overlay的位置 me._setInfoWin(pos); } }, timer); }; this.initLushu(map, arrPois, this.mycaiId); }, initLushu(map, arrPois, mycaiId) { this.lushu = new BMapLib.LuShu(map, arrPois, { defaultContent: this.infoWindow.contents, //"从天安门到百度大厦" autoView: true, //是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整 icon: new BMap.Icon( "http://developer.baidu.com/map/jsdemo/img/car.png", new BMap.Size(52, 26), { anchor: new BMap.Size(27, 13) } ), speed: this.speed, enableRotation: true, //是否设置marker随着道路的走向进行旋转 landmarkPois: [] }); }, }至此，我们的车就能移动了，而且当车超出地图的范围，自动回到地图中心，主要改变的就是路书原型链上_move的方法。 下面再添上需求的几个方法 // 改变播放的速度 快进形式 speedChange() { this.lushu._opts.speed = this.speed }, // 回放进度条 向前向后拉进度条 tempChange() { this.lushu.i = this.temp if (this.temp >= this.maxNum - 2) { this.isPlay = false } }, // 开始&暂停 playChange() { if (this.isPlay) { this.lushu.pause(); this.isPlay = false } else { this.lushu.start(); this.isPlay = true } }, // 重置轨迹 reset() { this.temp = 0 this.speed = 1000 this.isPlay = false this.lushu.stop() },以上，便是一个满足需求的路书轨迹回放方法，此文仅为记录总结，仅供参考学习。 |
但是我们的需求是需要通过进度，速度来进行调整（如下图），显然难以达到这个目标。 
因此，在查看了多个文档后，选择了一个勉强达到需求的办法，就跟canvas的方式一样，每秒清除地图上的所有覆盖物，然后车重新定位地图中心点，画出运行到的轨迹，虽然可行，但是整个车运行的过程中，就宛如地图在移动，车一直钉在地图中心。【本文地址】
今日新闻 |
推荐新闻 |